<template>
	<view class="top">
		<view class="pic">
			<image class="bg" src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1420.png"></image>
			<!-- 登录状态下首页 -->
			<view class="my" v-if="status==1">
				<view>
					<image class="tx" :src="headPicture"></image>
				</view>
				<view class="mymsg">
					<view>
						<text>{{nickName}}</text>
						<text>普通会员</text>
					</view>
					<view>
						<text>余额：￥{{balance}}</text>
						<text>积分：{{score}}</text>
					</view>
				</view>
				<view class="fewm">
					<image @click="menber_code" class="ewm" src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u610.png"></image>
				</view>
			</view>
			<!-- 未登录状态下首页 -->
			<view class="my" v-if="status==0">
				<view class="nomytx">
					<image class="notx" src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u1505.png"></image>
				</view>
				<view @click="nologin_menber" class="mymsg">
					授权登录
				</view>
				<view class="fewm">
					<image @click="nologin_menber" class="ewm" src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u610.png"></image>
				</view>
			</view>
		</view>
		<view class="cen">
			<view @click="choiceinshop">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1429.svg"></image>
				
				<text>堂食</text>
			</view>
			<view @click="choiceoutshop">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1434.svg"></image>
				
				<text>外送</text>
			</view>
		</view>
		<view class="bot">
			<view @click="order">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1443.png"></image>
				<text>排队取号</text>
			</view>
			<view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1448.png"></image>
				<text>会员充值</text>
			</view>
			<view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u1451.png"></image>
				<text>积分商城</text>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				status:'1',
				id:'',
				nickName:'',
				headPicture:'',
				balance:'',
				score:''
			}
		},
		methods: {
			nologin_menber(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			menber_code(){
				uni.navigateTo({
					url:'/pages/menbercode/menbercode'
				})
			},
			choiceshop(){
				uni.navigateTo({
					url:'/pages/choiceshop/choiceshop'
				})
			},
			choiceinshop(){
				uni.navigateTo({
					url:'/pages/choiceinshop/choiceinshop'
				})
			},
			choiceoutshop(){
				uni.navigateTo({
					url:'/pages/choiceoutshop/choiceoutshop'
				})
			},
			order(){
				if(this.status==0){
					this.nologin_menber();
				}
				else this.choiceshop()
			},
			onShow(){
				this.get();
				let getphone=uni.getStorageSync("phone");
				console.log(getphone);
			},
			get(){
				http({
					url:'/get',
					success:(res)=>{
						console.log(res)
						if(res.data){
							this.id=res.data.id;
							this.nickName=res.data.data[0].nickName;
							this.headPicture=res.data.data[0].headPicture;
							this.balance=res.data.data[0].balance;
							this.score=res.data.data[0].score;
						}
					}
				})
			}
			
		}
	}
</script>

<style>
.pic{
	position: relative;
}
.bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 600rpx;
	background-color: rgba(246, 234, 227, 1);
	z-index: -1;
}
.my{
	position: absolute;
	width: 650rpx;
	height: 120rpx;
	top:545rpx;
	margin-left: 50rpx;
	border: 1px solid rgba(247, 114, 20, 0.3);
	background-color: #ffffff;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
}
.nomytx{
	margin-top: 8rpx;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	border-radius: 50%;
	background-color: #f8f8f8;
	display: flex;
	justify-content: center;
	align-items: center;
}
.notx{
	width: 40rpx;
	height: 50rpx;
}
.tx{
	margin-top: 8rpx;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
}

.ewm{
	width: 40rpx;
	height: 40rpx;
	
}
.mymsg{
	display: flex;
	flex-direction: column;
}
.my>view:nth-child(1){
	margin-left: 30rpx;
	width: 100rpx;
}
.my>view:nth-child(2){
	flex: 1;
	margin-left: 15rpx;
}
.my>view:nth-child(3){
	width: 40rpx;
	margin-right: 30rpx;
}
.mymsg view:first-child text:first-child{
	font-size: 36rpx;
	margin: 10rpx 15rpx 20rpx 0;
}
.mymsg view:first-child text:last-child{
	font-size: 26rpx;
	background-color: rgba(247, 114, 20, 1);
	border-radius: 10rpx;
	padding: 3rpx 8rpx;
	color: #ffffff;
	margin: 10rpx 15rpx 20rpx 0;
}
.mymsg view:last-child text{
	font-size: 22rpx;
	color: #999999;
	margin-right: 25rpx;
	
}
.cen{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top:700rpx;
	margin-left: 50rpx;
}
.cen view{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 310rpx;
	height: 230rpx;
	margin-right: 30rpx;
	border: 1px solid rgba(247, 114, 20, 0.3);
	border-radius: 30rpx;
	
}
.cen view image{
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 15rpx;
}
.bot{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top:970rpx;
	margin-left: 50rpx;
}
.bot view{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 200rpx;
	height: 150rpx;
	margin-right: 25rpx;
	border-radius: 15rpx;
	font-size: 30rpx;
}
.bot view:nth-child(1){
	background-color: rgba(254, 241, 233, 1);
	color: #DA976E;
}
.bot view:nth-child(2){
	background-color: rgba(222, 245, 241, 1);
	color: #7CD1C2;
}
.bot view:nth-child(3){
	background-color: rgba(235, 228, 255, 1);
	color: #5A6FBE;
}
.bot view image{
	width: 45rpx;
	height: 45rpx;
	margin-bottom: 20rpx;
}
</style>
